import React, { useState, useEffect } from 'react'
import { Table, Space, Input } from 'antd';
import axios from 'axios';
import { Modal, Button } from 'antd';

export default function Chat() {

    const [list, setList] = useState([])
    useEffect(() => {
        ht()
    }, [])

    const ht = () => {
        axios.post('/api/huati').then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }

    const Del = (id) => {
        axios.post('/api/htdel', { id }).then(res => {
            // console.log(res);
            ht()
        })
    }

    //搜索
    const { Search } = Input;
    const onSearch = (value) => {
        axios.post('/api/htsearch', { value }).then(res => {
            console.log(res);
            setList([...res.data.data])
        })
    }


    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            render: id => <a>{id}</a>,
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '科室',
            dataIndex: 'style',
            key: 'style',
        },
        {
            title: '类型',
            dataIndex: 'xuan',
            key: 'xuan',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => { Del(record.id) }}>删除</a>
                    <a onClick={() => { set(record) }}>编辑</a>
                </Space>
            ),
        },
    ];


    //添加
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [show, setshow] = useState(false)
    const [name1, setname1] = useState([])
    const [title1, settitle1] = useState([])
    const [date1, setdate1] = useState([])
    const [id1, setid1] = useState([])

    const name = (e) => {
        setname1(e.target.value)
    }
    const title = (e) => {
        settitle1(e.target.value)
    }
    const date = (e) => {
        setdate1(e.target.value)
    }


    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        if (show === true) {
            axios.post('/api/htset', { name1, title1, date1, id1 }).then(res => {
                // console.log(res);
                ht()
            })
        } else if (show === false) {
            axios.post('/api/htadd', { name1, title1, date1 }).then(res => {
                // console.log(res);
                ht()
            })
        }
        clear()
    };

    const handleCancel = () => {
        clear()
    };


    //编辑
    const set = (record) => {
        // console.log(record);
        setIsModalVisible(true);
        setshow(true)
        setname1(record.name)
        settitle1(record.title)
        setdate1(record.date)
        setid1(record.id)
    }

    const clear = () => {
        setIsModalVisible(false)
        settitle1('')
        setdate1('')
        setname1('')
        setid1(0)
    }

    return (
        <div className='wrapper'>
            <div className="add">
                <Button type="primary" onClick={showModal}>
                    添加
                </Button>
                <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>姓名:<input value={name1} onChange={(e) => name(e)} type="text" /></p>
                    <p>标题:<input value={title1} onChange={(e) => title(e)} type="text" /></p>
                    <p>日期:<input value={date1} onChange={(e) => date(e)} type="text" /></p>
                </Modal>
            </div>
            <Search placeholder="请输入姓名" onSearch={onSearch} style={{ width: 200 }} />
            <Table columns={columns} dataSource={list} />
        </div>
    )
}
